import Cubox from "../../components/Cubox";
import colorScheme from "../../components/assets/color-scheme";

import { useContext } from "react";
import { ConnContext } from "../contexts/Conn";

import styles from './side.module.css';

const SideElem = ({path, text, back='black', fore='base30'}) => {

  const {send} = useContext(ConnContext);

  const props = {
    cornerRadius: 20, 
    strokeWidth: 1, 
    isOutlined: true,
    backColor: colorScheme[back],
    foreColor: colorScheme[fore],
    opacity: 0.5,
    onClick: () => {
      send('page', {path})
    }
  }

  return <Cubox {...props}>
    <div className={styles['item']}>{text}</div>
  </Cubox>
} 

const Side = ({path='/', list=[]}) => {
  return <div className={styles['side']}>
    {list.map((item, i) => {
      console.log(item);
      if (item.key && item.desc) {
        return <SideElem key={i} text={item.desc} path={`${path}/${item.key}`}/>
      } else {
        return <SideElem key={i} text={item} path={`${path}/${item}`}/>
      }
    })}
  </div>
}

export default Side;